<template>
  <div>
    <h3>文章列表</h3>
    <table border="1" width="80%" align="center">
      <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in articleList" :key="item.id" align="center">
          <td>{{ index+1 }}</td>
          <td>{{ item.title }}</td>
          <td>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapActions, mapState } from 'pinia';
import useArticleStore from "../store/articleStore";
export default {
  // setup() {
  //   // 创建文章数据存储对象
  //   const articleStore = useArticleStore();
  //   const { getArticleList,articleDel} = articleStore;
  //   return {
  //     articleList:articleStore.articleList,
  //     getArticleList,
  //     articleDel
  //   };

  // },
  computed:{
    ...mapState(useArticleStore,['articleList'])
  },
  created() {
    this.getArticleList();
  },
  methods:{
    ...mapActions(useArticleStore,['articleDel','getArticleList']),
    del(index){
      console.log(index);
      this.articleDel(index);
    }
  }
}
</script>

<style>
</style>